<?php

/**
 * This file is part of Cxz
 *
 * (c) Flaravel 2020 <https://github.com/flaravel/cxz>
 *
 *  document https://learnku.com/blog/FLaravel
 *
 * visited
 */

namespace App\Admin\Metrics\Examples;

use Dcat\Admin\Widgets\Metrics\Round;
use Illuminate\Http\Request;

class ProductOrders extends Round {
	/**
	 * 初始化卡片内容
	 */
	protected function init() {
		parent::init();

		$this->title('Product Orders');
		$this->chartLabels(['Finished', 'Pending', 'Rejected']);
		$this->dropdown([
			'7'   => 'Last 7 Days',
			'28'  => 'Last 28 Days',
			'30'  => 'Last Month',
			'365' => 'Last Year',
		]);
	}

	/**
	 * 处理请求
	 *
	 * @param Request $request
	 *
	 * @return mixed|void
	 */
	public function handle(Request $request) {
		switch ($request->get('option')) {
			case '365':
			case '30':
			case '28':
			case '7':
			default:
				// 卡片内容
				$this->withContent(23043, 14658, 4758);

				// 图表数据
				$this->withChart([70, 52, 26]);

				// 总数
				$this->chartTotal('Total', 344);
		}
	}

	/**
	 * 设置图表数据.
	 *
	 * @param array $data
	 *
	 * @return $this
	 */
	public function withChart(array $data) {
		return $this->chart([
			'series' => $data,
		]);
	}

	/**
	 * 卡片内容.
	 *
	 * @param int $finished
	 * @param int $pending
	 * @param int $rejected
	 *
	 * @return $this
	 */
	public function withContent($finished, $pending, $rejected) {
		return $this->content(
			<<<HTML
<div class="col-12 d-flex flex-column flex-wrap text-center" style="max-width: 220px">
    <div class="chart-info d-flex justify-content-between mb-1 mt-2" >
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-primary"></i>
              <span class="text-bold-600 ml-50">Finished</span>
          </div>
          <div class="product-result">
              <span>{$finished}</span>
          </div>
    </div>

    <div class="chart-info d-flex justify-content-between mb-1">
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-warning"></i>
              <span class="text-bold-600 ml-50">Pending</span>
          </div>
          <div class="product-result">
              <span>{$pending}</span>
          </div>
    </div>

     <div class="chart-info d-flex justify-content-between mb-1">
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-danger"></i>
              <span class="text-bold-600 ml-50">Rejected</span>
          </div>
          <div class="product-result">
              <span>{$rejected}</span>
          </div>
    </div>
</div>
HTML
		);
	}
}
